<template>
  <div class="home-news">
    <el-container class="container-box">
      <el-main class="container-content">
        <el-scrollbar>
          <el-row :gutter="20" class="container-content-cardContent">
            <el-col :span="24">
              <div class="card-header">
                <span>赛事新闻</span>
              </div>
            </el-col>
            <!-- :offset="1"  -->
            <el-col :span="24" class="" v-for="item in newsList" :key="item.id">
              <el-card class="cursor-pointer container-content-cardItem" shadow="hover" @click="openDialog(item)">
                <!-- <el-image style="width: 100%; height: 200px" :src="item.image" :alt="item.title" /> -->
                <div class="news-container">
                  <el-text class="news-title">{{ item.title }}</el-text>
                  <span v-text="TimeYH(item.createTime)"></span>
                  <!-- <div class="courseForum-content-context">
                    <el-scrollbar>
                      <div v-html="item.content" class="editor-content-view"></div>
                    </el-scrollbar>
                  </div> -->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>

      <!-- 详情弹出层 -->
      <el-dialog v-model="dialogVisible" width="70%">
        <template #header>
          <span class="icon-text el-dialog__header-title">
            <el-icon class="text-primary">
              <Guide />
            </el-icon>
            {{ currentItem.title }}
          </span>
        </template>
        <div v-html="currentItem.context" class="editor-content-view"></div>
        <div class="editor-content-time">
          <span>{{ TimeYH(currentItem.createTime) }}</span>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
import { TimeYH } from "../../util/time";
import service from "../request";

const store = useStore(Storekey);
const router = useRouter();
const route = useRoute();

const newsList = ref<{
  context: string,
  createTime: string,
  id: string,
  remark: string,
  status: number,
  title: string,
  updateTime: string,
  userId: string,
}[]>([
  // { id: 1, title: "编辑能力测试数据（最新）", createTime: "2024-07-18 17:29:17", content: "初中组测试数据有更新，请以下方最新附件为准！", },
  // { id: 2, title: "申诉表及申诉统计表", createTime: "2024-07-18 17:29:17", content: "新闻摘要2", },
  // { id: 3, title: "编程能力测试数据", createTime: "2024-07-18 17:29:17", content: "新闻摘要3", },
  // { id: 4, title: "BCSP-X 2024第一轮编程能力测试题目及代码公示", createTime: "2024-07-18 17:29:17", content: "新闻摘要4", },
  // { id: 5, title: "BCSP-X 2024 基础知识测评成绩公示", createTime: "2024-07-18 17:29:17", content: "新闻摘要5", },
  // { id: 6, title: "BCSP-X 2024第一轮基础知识测评申诉工作完成及编程能力测评活动地点变更的通知", createTime: "2024-07-18 17:29:17", content: "基础知识测评申诉均已处理完成，本次涉及部分学生答题卡漏读，均完成更正。请申诉的选手关注成绩的更新。因首都医科大学花乡校区临时电力维修，无法保障活动期间电力供应，小学高年级组活动地点更改至北京经济管理职业学院（北京市朝阳区花家地街12号）。晚上6点前，符合条件的选手将会自动生成测评证。", },
  // { id: 7, title: "程序回收系统使用说明", createTime: "2024-07-18 17:29:17", content: "......", },
]);

const dialogVisible = ref(false);
const currentItem = ref(newsList.value[0]);

const openDialog = (item: any) => {
  currentItem.value = item;
  dialogVisible.value = true;
};

onMounted(async () => {

  const params = {
    "page": 1,
    "size": 5,
    "sort": "desc",
    "order": "createTime",
    'status': 0
  }
  service.post(`api/student/article/list`, params)
    .then(data => {
      newsList.value = data
    })
    .catch(error => {
      console.error('service get error:', error);
    });
});

</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 5% 0;
  margin: var(--container-margin) 0rem 0 0rem;
  --container-margin: 20px;
  --container-header-height: 10vh;
  --container-bg-color: #fff;
}

.container-content {
  background: var(--container-bg-color);
  padding: 0;
  min-width: 100%;
  height: calc(100vh - 64px - var(--container-margin)*2);
  overflow-x: hidden !important;
}

.container-content-cardContent {
  /* padding: var(--container-margin); */
}

.card-header {
  height: auto;
  /* height: 40px; */
  /* background: #ecf5ff; */
  line-height: 40px;
  color: #232f38;
  font-size: 16px;
  padding: 6px 20px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 97.4%, rgba(0, 0, 0, 0.6) 100%, rgba(0, 0, 0, 0.2) 100%, rgba(0, 0, 0, 0.6) 100%);
  font-weight: 700;
}

.container-content-cardItem {
  margin: var(--container-margin) var(--container-margin) 0;
}

.news-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-title {
  max-width: 75%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.courseForum-content-context {
  overflow: auto;
}

.editor-content-view {
  border-bottom: solid 1px #e2e2e2;
  padding: var(--container-margin) 0;
}

.editor-content-time {
  padding: calc(var(--container-margin)/2) 0;
  text-align: right;
}
</style>

<style>
/* 隐藏横向滚动条无效 */
#app.hdbm .home-news .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

/* 设置横向滚动条宽高为0 */
#app.hdbm .home-news .el-scrollbar__bar.is-horizontal {
  width: 0;
  height: 0;
}
</style>
